<template>
	<view>
		<top-navigation :bgColor="'#FFFFFF'">
			<template #center-slot>
				意见反馈
			</template>
		</top-navigation>
		<u-collapse v-for="(item,index) in questions" :key="index" :border="false" style="background: #FFF;margin-top: 20rpx;">
			<u-collapse-item :title="item.title">
				<text class="u-collapse-content">{{item.content}}</text>
			</u-collapse-item>
		</u-collapse>
		<!-- 联系平台 -->
		<view class="func-button" @tap="$navto('/module/setup/contact')">
			联系平台
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questions: [{
					title: '/deep/的作用',
					content: '的时候我们需要，我们需要在一个组件中改变被引入组件的样式，直接使用class命名改变样式没有任何反应，这种情况就需要使用/deep/或::v-deep了'
				}, {
					title: 'JavaScript中堆与栈的区别',
					content: '栈由操作系统自动分配和释放，用于存放简单的数据段，占据固定大小的空间，比如基本数据类型（Number、String、Boolean……）和函数的参数值等。堆由开发人员自主分配和释放，若不主动释放，程序结束时由浏览器回收，用于存储引用类型（引用类型的变量实际上保存的不是变量本身，而是指向内存空间的指针）。'
				}, {
					title: '什么是组件',
					content: '组件是视图层的基本组成单元。组件是一个单独且可复用的功能模块的封装'
				}]
			};
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: $uni-bg-color-grey;
	}

	::v-deep .u-cell__body {
		height: 100rpx;
	}

	.func-button {
		position: fixed;
		bottom: 48rpx;
		left: 50%;
		transform: translateX(-50%);
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		width: 668rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		background: #FFF;
		color: $uni-color-primary;
	}
</style>
